angular *ngFor 控制循环次数 指定次数

前言

有时候页面循环，我们想按照次数循环，类似于Java的for(i=1;i<arr.length;i++)形式，但是angular的*ngFor并不支持此操作，所以就得变个思维，指定循环次数

操作

1. 首先我们定义一个数组,这个数组的长度为你想要循环的最大次数

   arr = [ 1, 2, 3, 4, 5];

2. 我们还是利用循环 然后使用*ngIf控制循环次数，达到指定的效果（有数据则显示 无数据不做新增行）

    <ng-container *ngFor="let i of arr;let n=index"  >
                                <tr  *ngIf="n< 5-data.lineList.length" >
                                    <td>&nbsp;&nbsp;</td>
                                    <td>&nbsp;&nbsp;</td>
                                    <td>&nbsp;&nbsp;</td>
                                    <td>&nbsp;&nbsp;</td>
                                    <td [attr.rowspan]="i===0?5:1" *ngIf="i== 0">
                                        &nbsp;&nbsp;
                                    </td>
                                </tr>
                            </ng-container>

3. 直接循环所有次数 无数据填空白

  <tbody>
         <tr *ngFor="let data of data; index as i;">
               <td>{{data.shipArticleName?data.shipArticleName:'&nbsp;&nbsp;'}}
               </td>
               <td>{{data.meteringUnit?data.meteringUnit:'&nbsp;&nbsp;'}}
               </td>
               <td>{{data.amount?data.amount:'&nbsp;&nbsp;'}}
               </td>
               <td [attr.rowspan]="i===0?5:1" *ngIf="i== 0">{{shipCause?shipCause:'&nbsp;&nbsp;'}}
               </td>
         </tr>
   </tbody>

4. 如果有其他办法 可欢迎留言

受这篇文章启发《angular2 ngfor循环》